<template>
	<view class="wrap">
		<view class="display-flex display-flex-align-center" style="height: 50px;line-height: 50px;background-color: #007AFF;justify-content: space-between;color: #fff;">
			<view @click="preDay" class="" style="margin-left: 15px;">
				<text class="iconfont icon-xiangzuo "></text>
				<text>前一天</text> 
				
			</view>
			<view class="" style="background-color: #fff;color: #007AFF;border-radius: 5px;">
				<view @click="selTime" class="" style="padding: 0 15px;height: 30px;line-height: 30px;">
					{{time}}
				</view>
			</view>
			<view @click="nextDay" class="" style="margin-right: 15px;">
				
				<text>后一天</text>
				<text class="iconfont icon-xiangyou "></text>
			</view>
		</view>
		<scroll-view scroll-y="true" style="height:100%;width: 100%;" >
			<view  v-if="orderList.length" style="min-height:320px">
				<!-- <view class="list-title"><text>推荐线路</text> </view> -->
				<view class="list-main"  v-for="(item,index) in orderList" :key="index" @click.stop="goOrderDetail(item.baocheId)">
				    <view class="display-flex-column">
						<view class="row-center tytop">
							<view class="type-desc">
								{{item.typeDesc}}
							</view>
							<view class="add_time">
								下单时间：{{item.addTimeDesc}}
							</view>
							<view class="status_desc">
								{{item.statusDesc}}
							</view>
						</view>
						<view class="row" style="margin-bottom: 15px;">
							<view class="display-flex-column">
								<view class="row-center">
									<view class="station_dot station_dot_start">
									</view>
									<view class="od-item">
										{{item.origin}}
									</view>
								</view>
								
								<view class="shu-line" style="margin: 0 18px;">
									
								</view>
								
								<view class="row-center">
									<view class="station_dot station_dot_end">
									</view>
									<view class="od-item">
										{{item.destination}}
									</view>
								</view>
							</view>
						</view>
						<view class="line"></view>
						<view class="row-center" style="margin: 14px 5px;">
							<view v-if="item.type==1" class="dan">
								出发：{{item.goTimeDesc}}
							</view>
							<view v-if="item.type==2" class="dan display-flex-column">
								<text>出发：{{item.goTimeDesc}}</text>
								<text>返程：{{item.backTimeDesc}}</text>
							</view>
							<view v-if="item.type==3" class="dan">
								用车天数：{{item.days}}天
							</view>
							<view class="detail-desc">
								查看详情
							</view>
						</view>
						
					</view>
				</view>
				<view style="height: 20px;">
				</view>
			</view>
			<view  v-else class="" >
				<emptyPage title="暂无包车需求"></emptyPage>
			</view>
		</scroll-view>
		
		<uv-calendars ref="calendars" @confirm="timeConfirm" />
	</view>	
</template>

<script>
	import {
			mapGetters
		} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';
	
	import { getAdminBaocheList } from "@/api/api.js"
     import uvCalendars from '@/uni_modules/uv-calendars/components/uv-calendars/uv-calendars.vue'
	export default {
		computed: mapGetters(['isLogin']),
		components:{uvCalendars},
		data() {
			return {
				orderList: [],
				time: ''
				
			};
		},
		onShow() {
			if(this.isLogin == true){
				 // this.getUserInfo()
				 // this.getList()
			}else{
				toLogin();
			}
			
	
		},
		onLoad(option) {	
			// this.getList()
			// const dateStamp = new Date(new Date().toLocaleDateString()).getTime();
			
			// const date = new Date(dateStamp); // 根据时间戳创建Date对象
			// const year = date.getFullYear(); // 获取年份
			// const month = date.getMonth() + 1; // 获取月份，需要加1
			// const day = date.getDate(); // 获取日期

			const now = new Date();

			const year = now.getFullYear();
			const month = ('0' + (now.getMonth() + 1)).slice(-2);
			const day = ('0' + now.getDate()).slice(-2);


		     const formattedDate = `${year}-${month}-${day}`;
			 this.time = formattedDate
			 this.getList()
		
		},
		onReady() {
		},
		methods:{
			
			selTime(){
				this.$refs.calendars.open();
			},
			preDay(){
				const date = new Date(this.time);
				const timestamp = Number(date.valueOf());
				var myDate=new Date(timestamp - 86400000);
				
				console.log(myDate) //Thu Dec 30 22021 00:00:00 GMT+0800 (中国标准时间)
				
				// myDate.setDate(myDate.getDate()-1);
				// const year = myDate.getFullYear(); // 获取年份
				// const month = myDate.getMonth() + 1; // 获取月份，需要加1
				// const day = myDate.getDate(); // 获取日期
				
				const year = myDate.getFullYear();
				const month = ('0' + (myDate.getMonth() + 1)).slice(-2);
				const day = ('0' + myDate.getDate()).slice(-2);
				
				const formattedDate = `${year}-${month}-${day}`;
				 this.time = formattedDate
				 this.getList()
			},
			nextDay(){
				// console.log("this.time",this.time) //Thu D
				const date = new Date(this.time);
				// console.log("date",date) //Thu D
				const timestamp = Number(date.valueOf());
				// console.log("timestamp",timestamp) //Thu D
				var myDate=new Date(timestamp + 86400000);
				
				// console.log("111",timestamp + 86400000) //Thu Dec 30 22021 00:00:00 GMT+0800 (中国标准时间)
				
				// myDate.setDate(myDate.getDate()+1);
				// const year = myDate.getFullYear(); // 获取年份
				// const month = myDate.getMonth() + 1; // 获取月份，需要加1
				// const day = myDate.getDate(); // 获取日期
				const year = myDate.getFullYear();
				const month = ('0' + (myDate.getMonth() + 1)).slice(-2);
				const day = ('0' + myDate.getDate()).slice(-2);
				const formattedDate = `${year}-${month}-${day}`;
				 this.time = formattedDate
				 this.getList()
			},
			timeConfirm(e){
				console.log(e)
				this.time = e.fulldate
				this.getList()
			},
			getList(){
				uni.showLoading({
					title:'请稍后...'
				})
				getAdminBaocheList({time: this.time}).then(res => {
					uni.hideLoading()
					this.orderList = res.data
				}).catch(err => {
					uni.hideLoading()
					// this.$u.toast(err.msg)
				})
			},
			goOrderDetail(baoche_id){
				uni.navigateTo({
					url:"/pages/bus/baoche/order_detail_admin?baoche_id="+baoche_id
				})
			}
			
		},
		
		
	}
</script>

<style lang="scss" scoped>
	.list-main{
		position: relative;
		margin: 12rpx 24rpx;
		background-color: #fff;
		border-radius: 4px;
	}
	
	.line-sn {
		font-size: 15px;
		font-weight: 600;
		color: #000000;
		margin: 8px 10px;
	}
	.od-item{
		color: #888;
		font-size: 12px;
	}
	
	.ticket-item {
		margin-left: auto;
		margin-right: 20px;
	}
	.search-empty{
		position: fixed;
		top: 200px;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.type-desc{
		background-color: #007aff;
		color: #fff;
		padding: 1px 3px;
		border-radius: 3px;
	}
	.add_time{
		margin-left: 4px;
		font-size: 13px;
		color: #a7a7a7;
	}
	.tytop{
		margin: 8px 5px;
	}
	.status_desc{
		margin-left: auto;
		color: #ff4231;
		font-weight: 700;
	}
	.dan{
		margin-left: 4px;
		font-size: 13px;
		color: #a7a7a7;
	}
	.detail-desc{
		color: #007Aff;
		padding: 3px 4px;
		border-radius: 4px;
		border: 1px solid #007Aff;
		margin-left: auto;
	}
</style>